<template>
  <div class="girl">
    <mt-header fixed :title="msg"></mt-header>
    <!--mescroll滚动区域的基本结构-->
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <ul class="item_list" id="girl_list">
        <li v-for="item in items" :key="item._id">
          <img
            src="../../static/images/mescroll-empty.png"
            :imgurl="item.url"
            @click="itemDetail(item)"
          >
        </li>
      </ul>
    </mescroll-vue>
  </div>
</template>

<script>
import Detail from "./Detail.vue";
import { mapState, mapActions } from "vuex";
// 引入mescroll的vue组件
import MescrollVue from "mescroll.js/mescroll.vue";

export default {
  name: "Girls",
  data() {
    return {
      msg: "妹纸",
      items: [],
      pageIndex: 1,
      mescroll: null, //mescroll实例对象
      mescrollDown: {}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10 //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">亲,没有更多数据了~</p>',
        noMoreSize: 5, //如果列表已无数据,可设置列表总数大于5才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "girl_list", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "../../static/images/mescroll-empty.png", //图标,默认null,支持网络图
          tip: "暂无相关数据~", //提示
          btntext: "去逛逛 >", // 按钮,默认""
          btnClick() {
            // 点击按钮的回调,默认null
            alert("点击了按钮,具体逻辑自行实现");
          }
        },
        lazyLoad: {
          use: true, // 是否开启懒加载,默认false
          attr: "imgurl", // 网络图片地址的属性名 (图片加载成功会自动移除改属性): <img imgurl='网络图  src='占位图''/>
          showClass: "mescroll-lazy-in", // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
          delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
          offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
        }
      }
    };
  },
  computed: {
    // 這是映射 store.state.todayInfo ，所以才 undefined
    ...mapState(["girlsInfo"])
  },
  methods: {
    ...mapActions(["loadGirls"]),
    // mescroll组件初始化的回调,可获取到mescroll对象 (如果this.mescroll并没有使用到,可不用写mescrollInit)
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      let playload = {
        name: this.name,
        num: page.num,
        size: page.size
      };
      this.loadGirls(playload).then(
        success => {
          let arr = this.girlsInfo["results"];
          if (page.num === 1) this.items = [];
          this.items = this.items.concat(arr);

          this.$nextTick(() => {
            this.mescroll.endSuccess(arr.length);
          });
        },
        error => {
          console.log(error);
          this.mescroll.endErr();
        }
      );
    },
    itemDetail(item) {
      this.$router.push({
        path: `/detail/${item.desc}`
      });
    }
  },
  components: {
    detail: Detail,
    MescrollVue // 注册mescroll组件
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
ul li {
  display: block;
  float: left;
  width: 100%;
  height: 100%;
  list-style: none;
}
ul li img {
  width: 100%;
  vertical-align: middle;
  background-position: center center;
  background-repeat: no-repeat;
}
.mescroll {
  position: fixed;
  top: 40px;
  bottom: 30px;
  height: auto;
}
</style>
